@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');@import url('https://fonts.cdnfonts.com/css/pricedown');@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap');

/* Menu */
div#openmenu { display: none; position: absolute; width: 50%; top: 45%; left: 50%; transform: translate(-50%,-50%); }
.brand-logo { width: 25%; } /* when using an svg all you need to change is the width and it will resize it */

/* Menu tab & panel styles */
.text-tabcolor { color: rgb(255, 255, 255)!important; }
.bg-active-tab { background: rgb(23 23 23)!important; }
.bg-panel { background: rgb(30 30 30)!important; }
.q-tab-panels { border-top-right-radius: 12px!important; border-bottom-right-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */
.q-splitter__panel.q-splitter__before { border-top-left-radius: 12px!important; border-bottom-left-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */
.q-tabs--vertical.q-tabs--not-scrollable .q-tabs__content { border-top-left-radius: 12px!important; border-bottom-left-radius: 12px!important; } /* change all 12px for a different border radius (rounds edges of the menu) */

/* Menu text styles */
.text-h6 { color: rgb(255, 255, 255)!important; }
.text-h7 { color: rgba(255, 255, 255, 0.8)!important; }

/* Menu buttons & checkboxes & toggle switch icons styles */
.text-textbutton { color: rgb(0, 0, 0)!important; }
.bg-bgbutton { background: rgba(241, 229, 66, 0.651)!important; }
.q-checkbox__inner { color: rgb(255 255 255 / 70%)!important; }
.text-checkbox { color: rgba(241, 229, 66, 0.651)!important; }
.q-checkbox__svg { color: rgb(0, 0, 0)!important; }
.q-checkbox__inner--truthy .q-checkbox__bg { box-shadow: 0px 0px 3px 3px rgb(220 20 60 / 15%)!important; } /* if you want the checkboxes to have a glow/shadow */
.text-toggleicons { color: rgb(0, 0, 0)!important; }

/* Menu misc */
hr { opacity: 0.1!important; } /* horizontal line that seperates sections */
.q-mb-md { margin-bottom: 0px!important; } /* removes extra top padding */
.q-mb-md-d { padding-left: 10px!important; padding-bottom: 10px!important;} /* keeps q-items aligned */
.q-item { padding: 8px 0px!important; } /* keeps q-items aligned */
.q-item__section--avatar { min-width: 40px!important } /* keeps q-items aligned */
.q-item__section--side { padding-right: 0px!important; } /* keeps q-items aligned */
.q-splitter--vertical>.q-splitter__separator { width: 0px!important; } /* keeps navigation tab panel seamless */
div#q-loading-bar { display: none!important; } /* makes sure there's no ajax load from quasar */
::-webkit-scrollbar { display: none!important; } /* makes sure there's no ugly scrollbar on menu*/

/* Hud radial styles */
.text-health { color: rgb(33, 171, 97)!important; }
.text-stress { color: rgb(255, 0, 0)!important; }
.text-nos { color: rgb(255, 72, 133)!important; }
.text-cruise { color: rgb(255, 72, 133)!important; }
.text-armed { color: rgb(255, 72, 133)!important; }
.text-harness { color: rgb(182, 72, 255)!important; }
.text-oxygen { color: rgb(138, 168, 189)!important; }
.text-parachute { color: rgb(0, 0, 0)!important; }
.text-dev { color: rgb(0, 0, 0)!important; }
.text-gauge { color: rgb(255, 255, 255)!important; }

#main-container {
  width: 100%;
  height: auto;
}

/* Money */
#money-container {
  position: absolute;
  right: 2vw;
  top: 5vh;
  font-weight: 400;
  font-size: 40px;
}

#sign, #bank {
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #00ac31;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#plus {
  font-size: 50px;
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #00ac31;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#minus {
  font-size: 50px;
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #ac0000;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

#money {
  font-family: 'Pricedown Bl', sans-serif;
  text-align: right;
  color: #ffffff;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7);
}

/* Player HUD */

#playerhud {
  position: absolute;
  display: flex;
  left: 3vh;
  bottom: 0.2vw;
}

.q-ml-xl {
  margin-left: -22px!important; /* Change this to space radials */
}

/* Vehicle HUD */

speed:after {
  content: "MPH"; /* If using KPH change this content from MPH */
  display: block;
  padding-top: 3px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 8px;
  font-weight: 900;
}

altitude:after {
  content: "ALT";
  display: block;
  padding-top: 10px;
  padding-left: 2px;
  padding-right: 2px;
  font-weight: 900;
}

speed {
  transform: rotate(150deg);
  font-size: 2.4vh;
  position: fixed; 
  color: #fff; 
  text-align: center;
  font-weight: 600;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); 
}

altitude {
  transform: rotate(135deg);
  font-size: 2.4vh;
  position: fixed; 
  color: #fff; 
  text-align: center;
  font-weight: 600;
  text-shadow: -1px -1px 0 rgba(0,0,0, 0.7), 1px -1px 0 rgba(0,0,0, 0.7), -1px 1px 0 rgba(0,0,0, 0.7), 1px 1px 0 rgba(0,0,0, 0.7); 
}

.border {
  bottom: 7.9%;
  left: 1.3%;
  width: 0%;
  text-align: center;
}

.square {
  bottom: 6.30%;
  width: 29vh;
  height: 18.5vh;
  border: 4px solid #bababa;
  position: absolute;
  display: inline-block;
}

.circle {
  bottom: 6.9%;
  width: 27vh;
  height: 22.9vh;
  border: 4px solid #bababa;
  position: absolute;
  display: inline-block;
  border-radius: 50%;
}

/* Animation */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Compass */
.baseplate {
  position: relative;
  margin: 0 auto;
  top: -0.8vh;
	width: 150px;
  height: auto;
}

.street-container {
  position: relative;
  top: 0.5vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4vh;
  letter-spacing: 0.7px;
  text-decoration: none;
  font-style: normal;
  font-variant: small-caps;
  text-transform: none;
  font-weight: 800;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}

.street1 {
  position: absolute;
  margin: 0 auto;
  right: 55%;
  text-align: right!important;
  color: rgb(255, 255, 255);
}

.street2 {
  position: absolute;
  margin: 0 auto;
  left: 55%;
  text-align: left!important;
  color: rgb(255, 255, 255);
}

.pointer {
  position: absolute;
  margin: 0 auto;
  top: -2%;
  left: 0;
  right: 0;
  font-family: 'Yantramanav', sans-serif;
  color: rgb(255, 255, 255);
  font-size: 2.2vh;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.degrees {
  position: absolute;
  margin: 0 auto;
  top: 80%;
  left: 0;
  right: 0;
  opacity: 0.8;
  font-family: 'Yantramanav', sans-serif;
  color: rgb(255, 255, 255);
  font-size: 1.5vh;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%);
}

.bezel {
  position: relative;
  width:100%;
  height: 2vh;
  font-family: 'Yantramanav', sans-serif;
  font-size: 0.35vh;
  font-weight: 700;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}

.bearing {
  position: relative;
  width:100%;
  top: -0.5vh;
  height: 3.5vh;
  padding-left: 0.12vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.3vh;
  letter-spacing: 0.7px;
  text-decoration: none;
  font-style: normal;
  font-variant: small-caps;
  text-transform: none;
  font-weight: 600;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}